<template>
	<view class="container">
		<view class="settings-card">
			<view class="header">
				<view class="header-top">
					<view class="left-section">
						<text class="card-title">基本设置</text>
						<text v-if="isRunning" class="running-status">运行中</text>
					</view>
					<view class="right-section">
						<button class="action-btn success" @click="loadConfig">
							<text class="btn-icon">🔄</text>
							<text>刷新</text>
						</button>
					</view>
				</view>
			</view>
			 
			<view class="settings-form">
				<!-- Token 设置 -->
				<view class="form-group">
					<view class="form-header">
						<text class="form-label">Token</text>
						<text class="form-tip">用于身份验证</text>
					</view>
					<view class="input-wrapper token-wrapper" :class="{ 'disabled': isRunning }">
						<textarea
							v-model="config.token"
							class="token-input"
							placeholder="请输入潮玩Token"
							:maxlength="-1"
							:adjust-position="false"
							:cursor-spacing="20"
							:show-confirm-bar="false"
							:auto-height="true"
							:fixed="true"
							:disabled="isRunning"
							@input="handleTokenInput"
						/>
					</view>
				</view>

				<!-- Role ID 设置 -->
				<view class="form-group">
					<view class="form-header">
						<text class="form-label">Role ID</text>
						<text class="form-tip">修仙ID</text>
					</view>
					<view class="input-wrapper" :class="{ 'disabled': isRunning }">
						<text class="input-icon">👤</text>
						<input
							type="text"
							v-model="config.roleId"
							class="form-input"
							placeholder="请输入修仙id"
							:disabled="isRunning"
						/>
					</view>
				</view>

				<!-- 灵石阈值设置 -->
				<view class="form-group">
					<view class="form-header">
						<text class="form-label">灵石阈值</text>
						<text class="form-tip">最低抢夺灵石数量</text>
					</view>
					<view class="input-wrapper" :class="{ 'disabled': isRunning }">
						<text class="input-icon">💎</text>
						<input
							type="digit"
							v-model="config.threshold"
							class="form-input"
							placeholder="请输入灵石阈值"
							:disabled="isRunning"
						/>
					</view>
				</view>

				<!-- 快速刷新设置组 -->
				<view class="settings-group">
					<text class="group-title">快速刷新设置</text>
					<view class="group-content">
						<view class="form-group">
							<view class="form-header">
								<text class="form-label">刷新次数</text>
								<text class="form-tip">快速刷新尝试次数</text>
							</view>
							<view class="input-wrapper" :class="{ 'disabled': isRunning }">
								<text class="input-icon">🔄</text>
								<input
									type="number"
									v-model="config.quickRefreshCount"
									class="form-input"
									placeholder="请输入快速刷新次数"
									:disabled="isRunning"
								/>
							</view>
						</view>

						<view class="form-group">
							<view class="form-header">
								<text class="form-label">刷新时长(秒)</text>
								<text class="form-tip">单次刷新持续时间</text>
							</view>
							<view class="input-wrapper" :class="{ 'disabled': isRunning }">
								<text class="input-icon">⏱️</text>
								<input
									type="number"
									v-model="config.quickRefreshDuration"
									class="form-input"
									placeholder="请输入快速刷新时长"
									:disabled="isRunning"
								/>
							</view>
						</view>

						<view class="form-group">
							<view class="form-header">
								<text class="form-label">刷新间隔(秒)</text>
								<text class="form-tip">两次刷新间隔时间</text>
							</view>
							<view class="input-wrapper" :class="{ 'disabled': isRunning }">
								<text class="input-icon">⏳</text>
								<input
									type="number"
									v-model="config.quickRefreshInterval"
									class="form-input"
									placeholder="请输入快速刷新间隔"
									:disabled="isRunning"
								/>
							</view>
						</view>
					</view>
				</view>

				<!-- 目标昵称列表 -->
				<view class="form-group">
					<view class="form-header">
						<text class="form-label">目标昵称列表</text>
						<text class="form-tip">每行一个昵称，自动去重</text>
					</view>
					<view class="textarea-wrapper" :class="{ 'disabled': isRunning }">
						<textarea
							v-model="nicknameText"
							class="nickname-textarea"
							placeholder="请输入目标昵称，每行一个"
							:disabled="isRunning"
							@blur="handleNicknameChange"
							:maxlength="-1"
							:adjust-position="false"
							:cursor-spacing="20"
							:show-confirm-bar="false"
							:auto-height="true"
							:fixed="true"
						/>
					</view>
				</view>

				<!-- 保存按钮 -->
				<button
					class="save-button"
					:class="{ 'disabled': isRunning }"
					@click="saveConfig"
					:disabled="isRunning"
				>
					<text class="btn-icon">{{ isRunning ? '⏸️' : '💾' }}</text>
					<text>{{ isRunning ? '运行中无法保存' : '保存设置' }}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import auth from '@/utils/auth';

// 状态管理
const isRunning = ref(false);
const nicknameText = ref('');

// 初始化默认配置
const defaultConfig = {
	nicknames: [],
	uid: '',
	roleId: '',
	token: '',
	threshold: '168.0',
	quickRefreshCount: '3',
	quickRefreshDuration: '60',
	quickRefreshInterval: '1',
	startTime: '10:00',
	stopTime: '11:45'
};

// 使用 ref 包装配置对象，确保始终有值
const config = ref({ ...defaultConfig });

// 添加防抖定时器
let saveConfigTimer = null;
let lastToastTime = 0;
const TOAST_INTERVAL = 2000;

// 优化 Toast 显示
const showToast = (title, icon = 'none') => {
	const now = Date.now();
	if (now - lastToastTime < TOAST_INTERVAL) {
		return;
	}
	lastToastTime = now;
	uni.showToast({
		title,
		icon,
		duration: 2000
	});
};

// 处理昵称变化
const handleNicknameChange = () => {
	if (!nicknameText.value) return;
	
	const nicknames = nicknameText.value
		.split('\n')
		.map(n => n.trim().toLowerCase())
		.filter(n => n);
	config.value.nicknames = [...new Set(nicknames)];
};

// 验证Token格式
const validateToken = (token) => {
	if (!token) return { valid: false, message: 'Token不能为空' };
	
	const parts = token.split('.');
	if (parts.length !== 3) {
		return { 
			valid: false, 
			message: 'Token格式错误：需要包含两个点号(.)，分为三部分：Header.Payload.Signature' 
		};
	}
	
	try {
		// 尝试解析header和payload
		const header = JSON.parse(atob(parts[0]));
		const payload = JSON.parse(atob(parts[1]));
		
		// 检查是否过期
		if (payload.exp && payload.exp * 1000 < Date.now()) {
			return { valid: false, message: 'Token已过期' };
		}
		
		return { valid: true };
	} catch (e) {
		return { 
			valid: false, 
			message: 'Token格式错误：无法解析Header或Payload部分' 
		};
	}
};

// 添加获取用户信息的函数
const fetchUserInfo = async (token, uid) => {
	if (!token || !uid) return null;
	
	try {
		const response = await uni.request({
			url: `https://farm-api.lucklyworld.com/v8/api/user/home?uid=${uid}&version=2.0.4`,
			method: 'POST',
			header: {
				'User-Agent': 'com.caike.lomo/4.2.6 (Linux; U; Android 12; zh-cn) (91416; 402060)bbcbce6e97449754',
				'Channel': 'official',
				'ANDROIDID': 'a7b19730952f1068',
				'IMEI': '352746026192015',
				'test-encrypt': '0',
				'token': token,
				'Content-Type': 'application/json; charset=utf-8'
			},
			timeout: 10000
		});

		if (response.statusCode === 200 && response.data) {
			const userInfo = response.data.userInfo;
			if (userInfo) {
				// 更新账号信息
				const accountInfo = {
					token: token,
					uid: uid,
					roleId: response.data.roleId,
					nickname: userInfo.nickname,
					avatar: userInfo.avatar,
					userId: userInfo.userId
				};

				// 保存到账号列表
				const accounts = uni.getStorageSync('plunder_accounts') || [];
				const existingIndex = accounts.findIndex(acc => acc.roleId === accountInfo.roleId);
				
				if (existingIndex >= 0) {
					accounts[existingIndex] = accountInfo;
				} else {
					accounts.push(accountInfo);
				}
				
				uni.setStorageSync('plunder_accounts', accounts);
				
				// 如果是当前账号，更新当前账号信息
				const currentAccountId = uni.getStorageSync('current_account_id');
				if (currentAccountId === accountInfo.roleId) {
					uni.setStorageSync('current_account_id', accountInfo.roleId);
					uni.$emit('account-switched', accountInfo);
				}

				return accountInfo;
			}
		}
		return null;
	} catch (e) {
		console.error('获取用户信息失败:', e);
		return null;
	}
};

// 添加时间窗口检查函数
const isWithinTimeRange = () => {
	try {
		// 检查手动停止状态
		const manuallyStopped = uni.getStorageSync('plunder_manually_stopped') || false;
		if (manuallyStopped) {
			console.log('设置页面：检测到手动停止状态');
			return false;
		}

		// 获取当前时间（分钟）
		const now = new Date();
		const currentMinutes = now.getHours() * 60 + now.getMinutes();

		// 获取配置的时间范围
		const startTime = config.value.startTime;
		const stopTime = config.value.stopTime;

		// 验证时间格式
		const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
		if (!timeRegex.test(startTime) || !timeRegex.test(stopTime)) {
			console.error('设置页面：时间格式无效，重新加载配置');
			loadConfig();
			return false;
		}

		// 转换时间字符串为分钟
		const [startHours, startMinutes] = startTime.split(':').map(Number);
		const [stopHours, stopMinutes] = stopTime.split(':').map(Number);
		const startTotalMinutes = startHours * 60 + startMinutes;
		const stopTotalMinutes = stopHours * 60 + stopMinutes;

		// 检查是否在时间范围内
		const isWithin = startTotalMinutes <= stopTotalMinutes
			? currentMinutes >= startTotalMinutes && currentMinutes <= stopTotalMinutes
			: currentMinutes >= startTotalMinutes || currentMinutes <= stopTotalMinutes;

		console.log('设置页面：时间检查', {
			currentTime: now.toLocaleTimeString(),
			startTime,
			stopTime,
			isWithin,
			currentMinutes,
			startTotalMinutes,
			stopTotalMinutes
		});

		return isWithin;
	} catch (e) {
		console.error('设置页面：检查时间范围失败:', e);
		return false;
	}
};

// 修改 updateRunningState 函数
const updateRunningState = async () => {
	try {
		const runningState = uni.getStorageSync('plunder_running');
		const manuallyStopped = uni.getStorageSync('plunder_manually_stopped') || false;
		
		console.log('设置页面：开始更新运行状态', {
			runningState,
			manuallyStopped,
			currentState: isRunning.value
		});
		
		// 检查时间窗口
		const withinTimeRange = isWithinTimeRange();
		
		// 如果不在时间窗口内或手动停止，强制设置为未运行状态
		if (!withinTimeRange || manuallyStopped) {
			if (!withinTimeRange) {
				console.log('设置页面：当前不在运行时间段内，强制停止');
				// 确保存储状态一致
				uni.removeStorageSync('plunder_running');
				// 通知其他页面状态变化
				uni.$emit('running-state-changed', { isRunning: false });
				uni.$emit('globalStateChange', { isRunning: false });
			} else {
				console.log('设置页面：检测到手动停止状态，强制设置为未运行');
			}
			isRunning.value = false;
			return;
		}
		
		// 只在状态不一致时更新，且不主动触发状态变化
		const newRunningState = !!runningState;
		if (isRunning.value !== newRunningState) {
			console.log('设置页面：被动更新运行状态', { 
				oldState: isRunning.value, 
				newState: newRunningState,
				storedState: runningState,
				withinTimeRange
			});
			isRunning.value = newRunningState;
		}
	} catch (e) {
		console.error('设置页面：获取运行状态失败:', e);
		isRunning.value = false;
	}
};

// 加载配置
const loadConfig = () => {
	try {
		const savedConfig = uni.getStorageSync('plunder_config');
		if (savedConfig) {
			// 确保所有必要的字段都存在
			const newConfig = {
				...defaultConfig,
				...savedConfig,
				nicknames: Array.isArray(savedConfig.nicknames) ? savedConfig.nicknames : [],
				uid: savedConfig.uid || '',
				roleId: String(savedConfig.roleId || ''),
				token: (savedConfig.token || '').trim(),
				threshold: String(savedConfig.threshold || defaultConfig.threshold),
				quickRefreshCount: String(savedConfig.quickRefreshCount || defaultConfig.quickRefreshCount),
				quickRefreshDuration: String(savedConfig.quickRefreshDuration || defaultConfig.quickRefreshDuration),
				quickRefreshInterval: String(savedConfig.quickRefreshInterval || defaultConfig.quickRefreshInterval),
				startTime: savedConfig.startTime || defaultConfig.startTime,
				stopTime: savedConfig.stopTime || defaultConfig.stopTime
			};
			
			// 更新配置
			config.value = newConfig;
			
			// 更新昵称文本框
			nicknameText.value = newConfig.nicknames.join('\n');
			
			// 如果是从扫码页面跳转来的，且是首次加载配置，显示提示
			if (newConfig.token && newConfig.roleId) {
				const lastConfigLoadTime = uni.getStorageSync('last_config_load_time');
				const now = Date.now();
				const isFirstLoad = !lastConfigLoadTime;
				
				if (isFirstLoad) {
					uni.showToast({
						title: '配置已自动填充',
						icon: 'success',
						duration: 2000
					});
					uni.setStorageSync('last_config_load_time', now);
				}
			}
		} else {
			// 如果没有保存的配置，使用默认配置
			config.value = { ...defaultConfig };
			nicknameText.value = '';
		}
	} catch (e) {
		console.error('加载配置失败:', e);
		// 发生错误时使用默认配置
		config.value = { ...defaultConfig };
		nicknameText.value = '';
		showToast('加载配置失败');
	}
};

// 修改 saveConfig 函数
const saveConfig = async () => {
	// 重新检查运行状态
	await updateRunningState();
	
	console.log('设置页面：尝试保存配置', {
		isRunning: isRunning.value,
		storedRunningState: uni.getStorageSync('plunder_running'),
		manuallyStopped: uni.getStorageSync('plunder_manually_stopped')
	});
	
	if (isRunning.value) {
		showToast('运行中无法保存设置');
		return;
	}
	
	if (saveConfigTimer) {
		clearTimeout(saveConfigTimer);
	}
	
	saveConfigTimer = setTimeout(async () => {
		try {
			// 处理昵称列表
			handleNicknameChange();
			
			// 确保配置对象完整
			const configToSave = {
				...defaultConfig,
				...config.value,
				nicknames: config.value.nicknames || [],
				threshold: config.value.threshold || defaultConfig.threshold,
				quickRefreshCount: config.value.quickRefreshCount || defaultConfig.quickRefreshCount,
				quickRefreshDuration: config.value.quickRefreshDuration || defaultConfig.quickRefreshDuration,
				quickRefreshInterval: config.value.quickRefreshInterval || defaultConfig.quickRefreshInterval,
				startTime: config.value.startTime || defaultConfig.startTime,
				stopTime: config.value.stopTime || defaultConfig.stopTime
			};

			// 如果 Token 或 UID 发生变化，获取最新的用户信息
			if (configToSave.token && configToSave.uid) {
				uni.showLoading({ 
					title: '正在更新账号信息...',
					mask: true
				});
				
				const userInfo = await fetchUserInfo(configToSave.token, configToSave.uid);
				if (userInfo) {
					configToSave.roleId = userInfo.roleId;
					config.value.roleId = userInfo.roleId;
				}
				uni.hideLoading();
			}
			
			// 保存到存储
			uni.setStorageSync('plunder_config', configToSave);
			
			// 更新当前组件的状态
			config.value = { ...configToSave };
			
			// 使用 nextTick 确保状态更新后再发送事件
			nextTick(() => {
				uni.$emit('config-updated', configToSave);
				showToast('保存成功', 'success');
			});
			
			console.log('配置保存成功:', {
				token: configToSave.token ? '已设置' : '未设置',
				uid: configToSave.uid || '未设置',
				roleId: configToSave.roleId || '未设置',
				nicknamesCount: configToSave.nicknames?.length || 0,
				threshold: configToSave.threshold,
				quickRefreshCount: configToSave.quickRefreshCount,
				quickRefreshDuration: configToSave.quickRefreshDuration,
				quickRefreshInterval: configToSave.quickRefreshInterval
			});
		} catch (error) {
			console.error('保存配置失败:', error);
			showToast('保存失败');
		}
	}, 300);
};

// 生命周期钩子
onMounted(() => {
	// 加载配置
	loadConfig();
	
	// 初始化运行状态
	updateRunningState();
	
	// 监听全局状态变化
	uni.$on('globalStateChange', async (state) => {
		console.log('设置页面收到全局状态变化:', state);
		if (state?.isRunning !== undefined) {
			const oldState = isRunning.value;
			isRunning.value = state.isRunning;
			console.log('设置页面：被动更新全局状态', { 
				oldState, 
				newState: state.isRunning 
			});
		}
	});
	
	// 添加运行状态变化监听
	uni.$on('running-state-changed', async (state) => {
		console.log('设置页面收到运行状态变化:', state);
		if (state?.isRunning !== undefined) {
			const oldState = isRunning.value;
			isRunning.value = state.isRunning;
			console.log('设置页面：被动更新运行状态', { 
				oldState, 
				newState: state.isRunning 
			});
		}
	});
	
	// 监听配置更新
	uni.$on('config-updated', (newConfig) => {
		if (!newConfig) return;
		
		if (saveConfigTimer) {
			clearTimeout(saveConfigTimer);
		}
		
		saveConfigTimer = setTimeout(() => {
			config.value = { ...defaultConfig, ...newConfig };
		}, 300);
	});
	
	// 添加账号切换事件监听
	uni.$on('account-switched', (account) => {
		if (!account) return;
		
		console.log('设置页面收到账号切换事件:', account);
		if (saveConfigTimer) {
			clearTimeout(saveConfigTimer);
		}
		
		saveConfigTimer = setTimeout(() => {
			config.value = {
				...defaultConfig,
				...config.value,
				token: account.token || '',
				uid: account.uid || '',
				roleId: account.roleId || ''
			};
		}, 300);
	});
});

onUnmounted(() => {
	if (saveConfigTimer) {
		clearTimeout(saveConfigTimer);
	}
	uni.$off('globalStateChange');
	uni.$off('running-state-changed');
	uni.$off('config-updated');
	uni.$off('account-switched');
});

// 修改 onShow 钩子
defineExpose({
	async onShow() {
		console.log('设置页面显示，开始检查运行状态');
		
		try {
			const runningState = uni.getStorageSync('plunder_running');
			const manuallyStopped = uni.getStorageSync('plunder_manually_stopped') || false;
			
			console.log('设置页面：存储状态检查', {
				runningState,
				manuallyStopped,
				currentState: isRunning.value
			});
			
			// 检查时间窗口
			const withinTimeRange = isWithinTimeRange();
			
			// 如果不在时间窗口内或手动停止，强制设置为未运行状态
			if (!withinTimeRange || manuallyStopped) {
				if (!withinTimeRange) {
					console.log('设置页面：当前不在运行时间段内，强制停止');
					// 确保存储状态一致
					uni.removeStorageSync('plunder_running');
					// 通知其他页面状态变化
					uni.$emit('running-state-changed', { isRunning: false });
					uni.$emit('globalStateChange', { isRunning: false });
				} else {
					console.log('设置页面：检测到手动停止状态，强制设置为未运行');
				}
				isRunning.value = false;
				return;
			}
			
			// 被动更新状态，不触发状态变化
			const newRunningState = !!runningState;
			if (isRunning.value !== newRunningState) {
				console.log('设置页面：被动更新运行状态', {
					oldState: isRunning.value,
					newState: newRunningState,
					storedState: runningState,
					withinTimeRange
				});
				isRunning.value = newRunningState;
			}
		} catch (e) {
			console.error('设置页面：检查运行状态失败:', e);
			isRunning.value = false;
		}
		
		// 运行状态检查完成后再加载配置
		console.log('设置页面：开始加载配置');
		loadConfig();
	}
});

// 处理Token输入
const handleTokenInput = (e) => {
	// 移除可能的换行符和多余空格
	config.value.token = e.detail.value.replace(/[\r\n\s]+/g, '').trim();
};
</script>

<style>
.container {
	padding: 24rpx;
	padding-top: 24rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
	min-height: 100vh;
	box-sizing: border-box;
	width: 100%;
	overflow-x: hidden;
}

.settings-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16rpx;
	padding: 24rpx;
	margin: 0 auto;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(10px);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	max-width: 800rpx;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.header {
	margin-bottom: 24rpx;
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.left-section {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
}

.running-status {
	font-size: 24rpx;
	color: #67c23a;
	background: rgba(103, 194, 58, 0.1);
	padding: 4rpx 16rpx;
	border-radius: 24rpx;
}

.action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12rpx 24rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	font-weight: 500;
	border: none;
	gap: 8rpx;
	background: #f5f7fa;
	color: #606266;
	transition: all 0.3s ease;
}

.action-btn.success {
	background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
	color: white;
}

.action-btn.success:active {
	transform: scale(0.98);
	background: linear-gradient(135deg, #5daf34 0%, #529b2e 100%);
}

.btn-icon {
	font-size: 28rpx;
}

.settings-form {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.settings-group {
	background: rgba(248, 249, 250, 0.8);
	border-radius: 12rpx;
	padding: 20rpx;
	border: 1rpx solid rgba(0, 0, 0, 0.05);
}

.group-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 16rpx;
}

.group-content {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.form-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-label {
	font-size: 28rpx;
	color: #606266;
	font-weight: 500;
}

.form-tip {
	font-size: 24rpx;
	color: #909399;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	border: 2rpx solid rgba(220, 223, 230, 0.8);
	border-radius: 8rpx;
	padding: 0 24rpx;
	transition: all 0.3s ease;
}

.input-wrapper:focus-within {
	border-color: #409eff;
	box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
}

.input-icon {
	font-size: 32rpx;
	margin-right: 16rpx;
	color: #909399;
}

.form-input {
	flex: 1;
	height: 80rpx;
	background: transparent;
	border: none;
	padding: 0;
	font-size: 28rpx;
	color: #1a1a1a;
	transition: all 0.3s ease;
}

.token-wrapper {
	min-height: 80rpx;
	padding: 12rpx 24rpx;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

.token-input {
	flex: 1;
	min-height: 80rpx;
	width: 100%;
	background: transparent;
	border: none;
	padding: 0;
	font-size: 28rpx;
	color: #1a1a1a;
	line-height: 1.5;
	transition: all 0.3s ease;
	word-break: break-all;
	white-space: pre-wrap;
	font-family: monospace;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.textarea-wrapper {
	position: relative;
	background: rgba(255, 255, 255, 0.9);
	border: 2rpx solid rgba(220, 223, 230, 0.8);
	border-radius: 8rpx;
	transition: all 0.3s ease;
	min-height: 200rpx;
	max-height: 600rpx;
	overflow: hidden;
}

.textarea-wrapper:focus-within {
	border-color: #409eff;
	box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
}

.nickname-textarea {
	width: 100%;
	min-height: 200rpx;
	max-height: 600rpx;
	background: transparent;
	border: none;
	padding: 16rpx 24rpx;
	font-size: 28rpx;
	color: #1a1a1a;
	line-height: 1.5;
	transition: all 0.3s ease;
	word-break: break-all;
	white-space: pre-wrap;
}

.save-button {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
	border-radius: 8rpx;
	color: white;
	font-size: 32rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	margin-top: 32rpx;
	border: none;
	transition: all 0.3s ease;
}

.save-button:active {
	transform: scale(0.98);
	background: linear-gradient(135deg, #3a8ee6 0%, #337ecc 100%);
}

.save-button.disabled {
	background: #a0cfff;
	cursor: not-allowed;
}

.input-wrapper.disabled,
.textarea-wrapper.disabled {
	background: #f5f7fa;
	border-color: #e4e7ed;
	cursor: not-allowed;
}

.input-wrapper.disabled .form-input,
.textarea-wrapper.disabled .nickname-textarea,
.token-wrapper.disabled .token-input {
	background: #f5f7fa;
	color: #909399;
	cursor: not-allowed;
}

@media screen and (min-width: 768px) {
	.container {
		padding: 32rpx;
	}

	.settings-card {
		padding: 32rpx;
	}

	.form-input {
		height: 88rpx;
		font-size: 30rpx;
	}

	.token-wrapper {
		min-height: 88rpx;
	}
	
	.token-input {
		min-height: 88rpx;
		font-size: 30rpx;
	}

	.textarea-wrapper {
		min-height: 240rpx;
		max-height: 800rpx;
	}
	
	.nickname-textarea {
		min-height: 240rpx;
		max-height: 800rpx;
		font-size: 30rpx;
	}

	.save-button {
		height: 96rpx;
		font-size: 34rpx;
	}

	.form-label {
		font-size: 30rpx;
	}

	.form-tip {
		font-size: 26rpx;
	}

	.action-btn {
		font-size: 30rpx;
		padding: 14rpx 28rpx;
	}

	.btn-icon {
		font-size: 30rpx;
	}
}
</style>

